<template>
  <div class="notes">
    <div>
      <div class="wrap">
        <router-link tag="div" to="/search" class="search-header">
          <van-icon name="search" class="search-icon" />
          <div class="search-title">点击搜索旅行游记</div>
        </router-link>
        <div class="title">定制旅行的感受？听听他们怎么说</div>
        <div class="text">
          <p>自2021年成立，已有675243位顾客选择了游缘景行，游缘景行已为数以万计的客户定制出国自由行，</p>
          <p>收到了许多令我们欣慰与感动的好评，也有因我们的疏漏留下的批评与建议；</p>
          <p>谢谢所有鼓励与督促的声音，</p>
          <p>我们定会坚持初心，将游缘景行做的更好。</p>
        </div>
      </div>
      <!-- 分类按钮：点击按钮切换文章分类-->
      <div class="btn">
        <span class="click-classify">点击可选择分类: </span>
        <van-button @click="changeClassify('国内')" plain hairline type="primary" size="small">国内</van-button>
        <van-button @click="changeClassify('日韩')" plain hairline type="info" size="small">日韩</van-button>
        <van-button @click="changeClassify('东南亚')" plain hairline type="warning" size="small">东南亚</van-button>
        <van-button @click="changeClassify('欧美')" plain hairline type="danger" size="small">欧美</van-button>
      </div>
      <!-- 游记列表-->
      <van-list>
        <div v-for="(item, i) in notes" :key="i">
          <router-link :to="`/articles/${item.tid}`" class="articleItem">
            <div>
              <!-- 标题 -->
              <h3>{{ item.title }}</h3>
              <!-- 文章描述item.subtitle -->
              <p class="articleDes">{{ item.subtitle }}</p>
              <ul>
                <!-- 游玩地点-->
                <li>游玩地点：{{ item.destination }}</li>
                <!-- 发表时间 item.create_time-->
                <li>发表时间：{{ item.create_time }}</li>
              </ul>
            </div>
            <!-- 主图-->
            <div><img class="articleImg" :src="item.cover_img" alt="" /></div>
          </router-link>
        </div>
      </van-list>
    </div>
    <div class="bottom-text" v-show="!notes[0]">暂无游记</div>
    <router-link to="/search" tag="div" class="bottom-text">点击搜索更多游记</router-link>
    <my-footer></my-footer>
  </div>
</template>
<script>
//引入提前封装好的获取游记列表的方法
import { getNotes } from '../server/article.js';

export default {
  data() {
    return {
      classify: '', // 保存分类
      notes: [], //保存当前游记列表
    };
  },
  mounted() {
    // 调用getNotes方法，传入查询到的游记列表数据
    getNotes(this.classify)
      .then((result) => {
        for (var i = 0; i < result.length; i++) {
          // 将数据库返回的时间处理为人看的时间
          result[i].create_time = this.moment(result[i].create_time).format('YYYY-MM-DD');
        }
        this.notes = result;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 切换分类重新加载列表
    changeClassify(name) {
      this.classify = name;
      getNotes(this.classify).then((result) => {
        for (var i = 0; i < result.length; i++) {
          // 将数据库返回的时间处理为人看的时间
          result[i].create_time = this.moment(result[i].create_time).format('YYYY-MM-DD');
        }
        this.notes = result;
      });
    },
  },
};
</script>
<style lang="scss">
@import './scss/notes.scss';
</style>
